<template>
	<view>			
		<view class="hotelService"  >
			<view class="title">
				<text class="name">收款</text>							
			</view>
			<view class="content">
				<view class="box">
					<view class="">
					  <text style="color: red;">*</text>
					  <text>收据编号</text>
					</view>
					<input type="text" :disabled="isEdit" v-model="income.banquet_receivable_no" placeholder="请输入" placeholder-style="color:#999999;" />
				</view>								
				<commonPicker leftTitle="收款性质" :disabled="true"     :rightValueId="income.banquet_income_type"   name="exchangeTypePicker"></commonPicker>
				<commonPicker leftTitle="收款方式"  :disabled="isEdit"  @echoValue="echoValueTypeFn"  :rightValueId="income.banquet_income_payment"   name="paymentPicker"></commonPicker>
				<view class="box">						
					<view class="">
					  <text style="color: red;">*</text>
					  <text>收款金额</text>
					</view>
					<input type="digit" :disabled="isEdit" v-model="income.banquet_income_item_price" placeholder="请输入" placeholder-style="color:#999999;" />
				</view>
				<view class="box">						
					<view class="">
					  <text style="color: red;">*</text>
					  <text>收款时间</text>
					</view>
					<timeSelector showType="yearToMinute"  @btnConfirm="income_date" >
					   <input type="text" :disabled="true" v-model="income.banquet_income_date" placeholder="请输入" placeholder-style="color:#999999;" />
					</timeSelector>
					
				</view>
				<view class="remark">
					<text>备注</text> 
					<textarea type="text" :disabled="isEdit" v-model="income.remark" placeholder="请输入备注" placeholder-style="color:#999999;" />				
				</view>	
			</view>	
		</view>	
		<!-- 合同照片 -->
		<view class="line"></view>
		<view class="photo"  >
			<text>合同照片</text>
			<view class="img_list" style="display: flex;justify-content: left;">
				<view class="addPic" v-for="(item,index) in   income.contract_img" :key="index">
					<image :src="item" mode="widthFix" @click="lookImg({list:  income.contract_img,index:index})" ></image>
					<uni-icons v-if="isEdit?false:true" @click="deleteImageArray(index,'contract_img')" type="minus-filled" size="15" color="red" style="position: absolute;right:-30upx;top: 0;"></uni-icons>
				</view>
				<view class="addPic" v-if="isEdit?false:true" @click="chooseImage('contract_img')">
					<image src="/static/add.png"></image>					
				</view>
			</view>			
		</view>
		<!--合同照片结束  -->
		
		<!-- 收据照片 -->
		<view class="line"></view>
		<view class="photo">
			<text>收据照片</text>
			<view class="img_list" style="display: flex;justify-content: left;">
				<view class="addPic" v-for="(item,index) in   income.receipt_img" :key="index">
					<image :src="item" mode="widthFix" @click="lookImg({list:  income.receipt_img,index:index})"></image>
					<uni-icons v-if="isEdit?false:true" @click="deleteImageArray(index,'receipt_img')" type="minus-filled" size="15" color="red" style="position: absolute;right:-30upx;top: 0;"></uni-icons>
				</view>
				<view class="addPic" v-if="isEdit?false:true" @click="chooseImage('receipt_img')">
					<image src="/static/add.png"></image>					
				</view>
			</view>
			
		</view>
		<!-- 收据照片结束 -->
		
		<!-- 小票或收款截图照片 -->
		<view class="line"></view>
		<view class="photo">			
			<text>小票或收款截图照片</text>
			<view class="img_list" style="display: flex;justify-content: left;">
				<view class="addPic" v-for="(item,index) in   income.note_img" :key="index">
					<image :src="item" mode="widthFix" @click="lookImg({list:  income.note_img,index:index})"></image>
					<uni-icons v-if="isEdit?false:true" @click="deleteImageArray(index,'note_img')" type="minus-filled" size="15" color="red" style="position: absolute;right:-30upx;top: 0;"></uni-icons>
				</view>
				<view class="addPic" v-if="isEdit?false:true" @click="chooseImage('note_img')">
					<image src="/static/add.png"></image>					
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import timeSelector from '@/component/wing-time-selector/wing-time-selector.vue';
	import sun from '@/utils/sun.js'
	export default {
		components: {		
			timeSelector
		},
		props:{
			isEdit:{
				type:Boolean,
				default:false
			},
			dataValue:{
				type:Object||Array
			}
		},
		data() {
			return {					
				income: {
					banquet_receivable_no:"",//收据编号
					banquet_income_item_price:'',//收款金额
					banquet_income_date:'',//收款日期					
					banquet_income_type:8,//收款性质
					banquet_income_payment:0,//收款方式
					banquet_income_payment_text:'',//收款方式
					remark:'',//备注						
					receipt_img:[],//收据图片
					note_img:[],//小票
					contract_img:[],//
				},
				
			}
		},
		onLoad(options) {
				
		},
		watch:{
			income:{
				handler:function(newValue,oldValue){				  
				  this.$emit('echoIncome',newValue)
				},
				deep:true,
			},		
			dataValue:{
				handler:function(newValue,oldValue){				  			
				 this.income =  newValue
				},
				deep:true,
			}
		},
		methods: {
			income_date(e){
				this.income.banquet_income_date=e.ymd
			},		
			echoValueTypeFn(e){
				this.income.banquet_income_payment = e.id
			},
			//查看图片
			lookImg(e){
				let _this=this
				 uni.previewImage({
					current:e.index,
					urls:e.list,
					longPressActions: {						
						success: function(data) {
							
						},
						fail: function(err) {
							
						}
					}
				});
			},
			//选择图片
			 chooseImage(e) {				 
				 let _this =this;
				 uni.chooseImage({
				     count: 1, //默认9
				     sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有				     
				     success: function (res) {
				        _this.upImg(res.tempFiles,e)
				     }
				 });
				
			},
			//上传图片
			upImg(data,e){				
				let _this = this;
				uni.showLoading({title:'上传中',mask:true});
				var i = data.i ? data.i : 0;//当前上传的哪张图片
				var success = data.success ? data.success : 0;//上传成功的个数
				var fail = data.fail ? data.fail : 0;//上传失败的个数
				uni.uploadFile({
					url:sun.http+"/h5/order.upload/doupload",													
					filePath:data[i].path,
					header:{
						
					},
					name:'file',
					formData:{
						token:uni.getStorageSync("token")?uni.getStorageSync("token"):''
					},
					success: (res) =>{
						if (JSON.parse(res.data).msg == "上传成功"){
							success++;//图片上传成功，图片上传成功的变量+1
							uni.hideLoading()
						}								
						if(e=='contract_img'){
						   _this .income.contract_img.push(JSON.parse(res.data).data.url)	
						}
						if(e == "receipt_img"){
							_this .income.receipt_img.push(JSON.parse(res.data).data.url)							
						}
							
						if(e == "note_img"){
							_this .income.note_img.push(JSON.parse(res.data).data.url)							
						}
					},
					fail:()=>{
					 fail++;//图片上传失败，图片上传失败的变量+1
					},
					complete: () => {
						i++;//这个图片执行完上传后，开始上传下一张
						if (i == data.length) {   //当图片传完时，停止调用          
							uni.showToast({
								icon:'none',
								title: '成功：' + success + " 失败：" + fail,
							})
						} else {//若图片还没有传完，则继续调用函数
							data.i = i;
							data.success = success;
							data.fail = fail;
							_this.upImg(data,e);
						}
						
					}		
				})
			},
			//删除图片
			deleteImageArray(index,e){
				if(e=='contract_img'){
				    this .income.contract_img.splice(index,1)				   
				}
				if(e == "receipt_img"){
					this .income.receipt_img.splice(index,1)				   
				}
					
				if(e == "note_img"){
					this .income.note_img.splice(index,1)				   					
				}
			},
			
		}
	}
</script>

<style lang="less">
@import '@/pages/auditless';
</style>

